<template>
  <view class="feedback-page">
    <nav-header title="意见反馈"></nav-header>
    
    <view class="content" :style="{ paddingTop: statusBarHeight + 44 + 'px' }">
      <!-- Feedback Form -->
      <view class="feedback-form">
        <!-- Feedback Type -->
        <view class="form-section">
          <text class="section-title">反馈类型</text>
          <view class="type-options">
            <view 
              class="type-option" 
              v-for="(type, index) in feedbackTypes" 
              :key="index"
              :class="{ 'active': selectedType === type.value }"
              @click="selectedType = type.value"
            >
              <text>{{ type.label }}</text>
            </view>
          </view>
        </view>
        
        <!-- Feedback Content -->
        <view class="form-section">
          <text class="section-title">反馈内容</text>
          <view class="feedback-textarea-container">
            <textarea 
              class="feedback-textarea" 
              v-model="feedbackContent"
              placeholder="请详细描述您遇到的问题或建议，以便我们更好地解决和改进"
              maxlength="500"
            ></textarea>
            <text class="word-count">{{ feedbackContent.length }}/500</text>
          </view>
        </view>
        
        <!-- Contact Information -->
        <view class="form-section">
          <text class="section-title">联系方式（选填）</text>
          <view class="contact-input">
            <input 
              type="text"
              v-model="contactInfo"
              placeholder="请留下您的手机号或邮箱，方便我们联系您"
            />
          </view>
        </view>
        
        <!-- Upload Images -->
        <view class="form-section">
          <text class="section-title">上传截图（选填）</text>
          <view class="upload-container">
            <view 
              class="image-item" 
              v-for="(image, index) in uploadedImages" 
              :key="index"
            >
              <image class="uploaded-image" :src="image" mode="aspectFill"></image>
              <view class="delete-btn" @click="removeImage(index)">
                <text class="delete-icon">×</text>
              </view>
            </view>
            
            <view class="upload-btn" @click="chooseImage" v-if="uploadedImages.length < 3">
              <text class="upload-icon">+</text>
              <text class="upload-text">上传图片</text>
            </view>
          </view>
          <text class="upload-tip">最多上传3张截图，每张不超过5MB</text>
        </view>
      </view>
      
      <!-- Submit Button -->
      <view class="submit-btn" @click="submitFeedback">
        <text>提交反馈</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import NavHeader from '@/components/nav-header.vue'

const statusBarHeight = ref(20)
const selectedType = ref('bug')
const feedbackContent = ref('')
const contactInfo = ref('')
const uploadedImages = ref([])

// 反馈类型
const feedbackTypes = [
  { label: '功能异常', value: 'bug' },
  { label: '功能建议', value: 'feature' },
  { label: '使用问题', value: 'usage' },
  { label: '其他', value: 'other' }
]

onMounted(() => {
  // 获取状态栏高度
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight
})

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 3 - uploadedImages.value.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      // 将选择的图片添加到已上传列表
      uploadedImages.value = [...uploadedImages.value, ...res.tempFilePaths]
    }
  })
}

// 移除图片
const removeImage = (index) => {
  uploadedImages.value.splice(index, 1)
}

// 提交反馈
const submitFeedback = () => {
  // 验证表单
  if (!feedbackContent.value.trim()) {
    uni.showToast({
      title: '请填写反馈内容',
      icon: 'none'
    })
    return
  }
  
  // 构建反馈数据
  const feedbackData = {
    type: selectedType.value,
    content: feedbackContent.value,
    contactInfo: contactInfo.value,
    images: uploadedImages.value,
    submitTime: new Date().toISOString()
  }
  
  // 显示加载中
  uni.showLoading({
    title: '提交中...'
  })
  
  // 模拟提交过程
  setTimeout(() => {
    uni.hideLoading()
    
    // 提交成功
    uni.showToast({
      title: '提交成功，感谢您的反馈！',
      icon: 'success',
      duration: 2000
    })
    
    // 延迟返回
    setTimeout(() => {
      uni.navigateBack()
    }, 2000)
    
    // 重置表单
    selectedType.value = 'bug'
    feedbackContent.value = ''
    contactInfo.value = ''
    uploadedImages.value = []
    
  }, 1500)
}
</script>

<style lang="scss" scoped>
.feedback-page {
  min-height: 100vh;
  background-color: #F8F8F8;
  
  .content {
    padding: 16px;
    padding-bottom: 30px;
  }
  
  .feedback-form {
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 16px;
    margin-bottom: 20px;
    
    .form-section {
      margin-bottom: 20px;
      
      .section-title {
        font-size: 15px;
        color: #333;
        font-weight: 500;
        margin-bottom: 12px;
        display: block;
      }
      
      .type-options {
        display: flex;
        flex-wrap: wrap;
        
        .type-option {
          height: 36px;
          padding: 0 16px;
          background-color: #f5f5f5;
          border-radius: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12px;
          margin-bottom: 12px;
          
          text {
            font-size: 14px;
            color: #666;
          }
          
          &.active {
            background-color: #e6f7e1;
            
            text {
              color: #5ac725;
            }
          }
        }
      }
      
      .feedback-textarea-container {
        position: relative;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 12px;
        background-color: #f8f8f8;
        
        .feedback-textarea {
          width: 100%;
          height: 150px;
          font-size: 15px;
        }
        
        .word-count {
          position: absolute;
          right: 12px;
          bottom: 12px;
          font-size: 12px;
          color: #999;
        }
      }
      
      .contact-input {
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 0 12px;
        background-color: #f8f8f8;
        
        input {
          width: 100%;
          height: 44px;
          font-size: 15px;
        }
      }
      
      .upload-container {
        display: flex;
        flex-wrap: wrap;
        
        .image-item {
          width: 100px;
          height: 100px;
          margin-right: 12px;
          margin-bottom: 12px;
          border-radius: 8px;
          overflow: hidden;
          position: relative;
          
          .uploaded-image {
            width: 100%;
            height: 100%;
          }
          
          .delete-btn {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 22px;
            height: 22px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            
            .delete-icon {
              color: #FFFFFF;
              font-size: 16px;
            }
          }
        }
        
        .upload-btn {
          width: 100px;
          height: 100px;
          background-color: #f8f8f8;
          border: 1px dashed #ddd;
          border-radius: 8px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-bottom: 12px;
          
          .upload-icon {
            font-size: 24px;
            color: #999;
            margin-bottom: 4px;
          }
          
          .upload-text {
            font-size: 12px;
            color: #999;
          }
        }
      }
      
      .upload-tip {
        font-size: 12px;
        color: #999;
      }
    }
  }
  
  .submit-btn {
    height: 44px;
    line-height: 44px;
    text-align: center;
    background-color: #5ac725;
    color: #FFFFFF;
    font-size: 16px;
    border-radius: 22px;
    margin-top: 20px;
  }
}
</style> 